<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<title>最简单的 HTML5 编辑器</title>
		<link href="assets/css/bootstrap-combined.min.css" rel="stylesheet">
		<link href="assets/css/font-awesome.css" rel="stylesheet">
		<style>
			body {
				background-color: #666;
				color: #fff;
			}
			.content {
				margin: 150px auto;
				width: 900px;
			}

			#editor {
				resize:vertical; 
				overflow:auto; 
				border:1px solid silver; 
				border-radius:5px; 
				min-height:200px;
				box-shadow: inset 0 0 10px silver;
				padding:1em;
			}
		</style>
		<link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
		<script src="http://dreamsky.github.io/main/blog/common/jquery.min.js"></script>
		<script src="http://dreamsky.github.io/main/blog/common/init.js"></script>
	</head>
	<body>
		<div class="content">
	        <div class="container-fluid">
	        	<div id='pad-wrapper'>
					<div id="editparent">
						<div id='editControls' class='span9' style=' padding:5px;'>
							<div class='btn-group'>
								<a class='btn' data-role='undo' href='#'><i class='icon-undo'></i></a>
								<a class='btn' data-role='redo' href='#'><i class='icon-repeat'></i></a>
							</div>
							<!-- <div class='btn-group'>
								<a class='btn' data-role='cut' href='#'><i class='icon-cut'></i></a>
								<a class='btn' data-role='copy' href='#'><i class='icon-copy'></i></a>
								<a class='btn' data-role='paste' href='#'><i class='icon-paste'></i></a>
							</div> -->
							<div class='btn-group'>
								<a class='btn' data-role='bold' href='#'><b>Bold</b></a>
								<a class='btn' data-role='italic' href='#'><em>Italic</em></a>
								<a class='btn' data-role='underline' href='#'><u><b>U</b></u></a>
								<a class='btn' data-role='strikeThrough' href='#'><strike>abc</strike></a>
							</div>
							<div class='btn-group'>
								<a class='btn' data-role='justifyLeft' href='#'><i class='icon-align-left'></i></a>
								<a class='btn' data-role='justifyCenter' href='#'><i class='icon-align-center'></i></a>
								<a class='btn' data-role='justifyRight' href='#'><i class='icon-align-right'></i></a>
								<a class='btn' data-role='justifyFull' href='#'><i class='icon-align-justify'></i></a>
							</div>
							<div class='btn-group'>
								<a class='btn' data-role='indent' href='#'><i class='icon-indent-right'></i></a>
								<a class='btn' data-role='outdent' href='#'><i class='icon-indent-left'></i></a>
							</div>
							<div class='btn-group'>
								<a class='btn' data-role='insertUnorderedList' href='#'><i class='icon-list-ul'></i></a>
								<a class='btn' data-role='insertOrderedList' href='#'><i class='icon-list-ol'></i></a>
							</div>
							<div class='btn-group'>
								<a class='btn' data-role='h1' href='#'>h<sup>1</sup></a>
								<a class='btn' data-role='h2' href='#'>h<sup>2</sup></a>
								<a class='btn' data-role='p' href='#'>p</a>
							</div>
							<div class='btn-group'>
								<a class='btn' data-role='subscript' href='#'><i class='icon-subscript'></i></a>
								<a class='btn' data-role='superscript' href='#'><i class='icon-superscript'></i></a>
							</div>
						</div>
						<div id='editor' class='span9' style='' contenteditable>
							<h1>世界上最简单的文本编辑器！</h1>
							<p>梦想天空博客关注<b>前端开发</b>技术，分享各种增强网站用户体验的 <b>jQuery</b> 插件，展示前沿的 <b>HTML5</b> 和 <b>CSS3</b> 技术应用，推荐优秀的网页设计案例，共享精美的设计素材和优秀的 <b>Web</b> 开发工具，希望这些精心整理的前端技术文章能够帮助到您。</p>
						</div>
					</div>
				</div>
			</div>
			<p style="margin-top:50px;padding:10px 50px">返回阅读：<a href="http://www.cnblogs.com/lhb25/p/html5-wysisyg-inline-editor.html">10行 JavaScript 实现世界上最简单的文本编辑器</a></p>
			<p style="padding:10px 50px"></p>
		</div>
		<div class="footer-banner" style="width:728px; margin:0 auto"></div>
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script>

			$(function() {
				$('#editControls a').click(function(e) {
					switch($(this).data('role')) {
						case 'h1':
						case 'h2':
						case 'p':
							document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>');
							break;
						default:
							document.execCommand($(this).data('role'), false, null);
							break;
					}
					
				})
			});

		</script>
	</body>
</html>